<!--
/**
 * @author xuyh0817
 * @email xuyh0817@foxmail.com
 * @date 2022-03-25 11:21
 * @version 2.0.0
 * @doc todo
 * @website todo
 * @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
 */
 -->
<template>
  <perfect-scrollbar ref="scroll" class="x-render-scrollarea-tree">
    <a-tree
      blockNode
      autoExpandParent
      :defaultExpandedKeys="defaultExpandedKeys"
      :checkedKeys="checkedKeys"
      :tree-data="treeData"
      @select="selectHandler"
    >
      <template slot="title" slot-scope="{title,eventKey,isLeaf}">
        <div class="x-render-tree-node-item"
             :class="{'x-render-tree-node-item-active':xDesignForm.currentId === eventKey}">
          <a-icon :type="isLeaf ? 'file':'folder'"></a-icon>
          <span style="margin-left: 4px;">{{ title }} </span>
        </div>
      </template>
    </a-tree>
  </perfect-scrollbar>
</template>

<script>
import {cloneDeep} from 'lodash'
import {flatFormOptions} from '../../../../../libs/utils'

export default {
  name: 'XDesignFormLeftCoomponentTree',
  inject: ['xDesignForm'],
  data(){
    return {
      defaultExpandedKeys: []
    }
  },
  computed: {
    treeData: {
      get() {
        const {xDesignForm} = this
        const formOptions = xDesignForm.formOptions
        const treeData = []
        if (formOptions.length === 0) {
          return treeData
        }
        this.getTreeData(cloneDeep(formOptions), treeData)
        return treeData
      }
    },
    checkedKeys: {
      get() {
        const {xDesignForm} = this
        return [xDesignForm.currentId]
      }
    }
  },
  watch:{
    'xDesignForm.formOptions':{
      immediate:true,
      deep:true,
      handler(){
        const {xDesignForm} = this
        const flatMap = {}
        flatFormOptions(xDesignForm.formOptions, flatMap)
        this.defaultExpandedKeys.splice(0,this.defaultExpandedKeys.length,...Object.keys(cloneDeep(flatMap)))
      }
    }
  },
  methods: {
    selectHandler(selectedKeys) {
      const {xDesignForm} = this
      const [nodeId] = selectedKeys
      if (!nodeId || nodeId === xDesignForm.currentId) {
        return
      }
      xDesignForm.currentId = nodeId
    },
    getTreeData(formOptions, treeData) {
      for (const option of formOptions) {
        const attrs = option.attrs
        if (!attrs) {
          continue
        }
        const treeNode = {key: option.id}
        if (!option.isLayout) {
          treeNode.title = option.formItem.label || Date.now()
          treeNode.isLeaf = true
          treeData.push(treeNode)
          continue
        }
        treeNode.title = attrs.layoutName || Date.now()
        treeNode.children = []
        treeData.push(treeNode)
        const children = attrs.children
        if (!children) {
          treeNode.isLeaf = true
          continue
        }

        for (const child of children) {
          if (!child.code && !child.name) {
            this.getTreeData(child.children, treeNode.children)
          } else {
            const childTreeNode = {
              key: !child.code && !child.name ? Date.now() : child.code + '-' + child.name,
              title: !child.code && !child.name ? '默认' : child.name,
              children: []
            }
            treeNode.children.push(childTreeNode)
            this.getTreeData(child.children, childTreeNode.children)
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="css">
/* 滚动区域 */
.x-render-scrollarea-tree {
  /* 减去头部的高度 */
  height: calc(100vh - 90px);
  padding: 4px;
}

.x-render-tree-node-item {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.x-render-tree-node-item-active {
  color: #f44;
}
</style>
